<template>
    <el-form ref="formRef" :model="form" label-width="100px" class="forgotForm">
        <el-form-item label="邮箱" prop="email" :rules="[
            {
                required: true,
                message: 'Please input email address',
                trigger: 'blur',
            },
            {
                type: 'email',
                message: 'Please input correct email address',
                trigger: ['blur', 'change'],
            },
        ]">
            <el-input type="email" v-model="form.email" placeholder="Enter Email..."></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="retrievePassword(formRef)" type="primary" class="submit-btn">发送邮箱</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { FormInstance, ElMessage } from "element-plus";
import { ref, defineProps, getCurrentInstance, defineEmits, reactive } from "vue";
import { useRouter } from "vue-router";
const form = reactive<any>({
    email: ''
})
const proxy = getCurrentInstance() as any;
const formRef = ref<FormInstance>();
//@ts-ignore
//@ts-ignore
const { $axios } = proxy.appContext.config.globalProperties
//找回密码
const retrievePassword = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: boolean) => {
        if (valid) {
            $axios.post("/api/v1/auth/forgotpassword",
                form
            ).then((res: any) => {
                console.log(res);
                if (res.success) {
                    ElMessage.success('发送成功，注意查看邮箱！');
                }
            })
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
</script>
<style scoped>
.forgotForm {
    width: 50%;
    margin: auto;
    margin-top: 200px;
}
</style>